<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>班级作业</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{position: relative; z-index: 6; height: 50px; top:0; background:#fff; }
.g-back{ position: absolute;left: 0;top:0; width: 50px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{position: absolute;right: 0;top:0; width: 50px; height: 50px;line-height: 50px; color:#3095fd; font-size: 14px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*选择项*/
.page-wrap{position: absolute;top:0;left: 0; padding-top: 50px; height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) right center no-repeat; background-size: 12px 7px; }
.color1{ color: #666 !important; }
.color2{ color: #2e95fc !important; }

/*消息列表*/
#xiaoxi-list ul{ padding: 0 15px; font-size: 15px; background: #fff ; }
#xiaoxi-list li{ padding:5px 0 5px 50px; border-bottom: 1px solid #f2f2f2; 
   background: url(../img/job.png) left center no-repeat; background-size: 36px; }
#xiaoxi-list li div{ position: relative; }
#xiaoxi-list .title{padding-right: 60px; overflow: hidden; display: block; width: 100%;   }
#xiaoxi-list .title-left{ position: absolute; top:0; right: 0; color:#999; font-size: 13px; }
#xiaoxi-list .text{padding-right: 60px; overflow: hidden; display: block; width: 100%;    color:#666;}
#xiaoxi-list .text-left{ position: absolute; top:0; right: 0; color:#999; font-size: 13px; }

/*通知详情*/
#xiangqing {position: absolute;width: 100%;  top:0; left:100%; /* display: none; */ }
#xiangqing .xiangqing{width: 100%; overflow:hidden; }
#xiangqing h2{ text-align: center; margin:10px 0; font-weight: 600; }
#xiangqing p{ width: 90%; margin: 10px auto; padding:10px; border-radius: 5px; background: #fff; }
#xiangqing h4{ padding:5px 0 5px 15px; background: #ccc; color:#f0874f; font-size: 14px; }
#xiangqing ul{ padding:15px; overflow: hidden; }
#xiangqing ul li{ float:left; margin-bottom: 10px; width: 20%; min-width: 56px;  }
#xiangqing .img{display: block;margin:0 auto; width:50px;height: 50px; border-radius: 50%;
 background: url(../img/t5.png) no-repeat; background-size: 50px;}
#xiangqing .name{display: block; text-align: center; font-size: 12px; color:#666; }

/*消息发布*/
#jiaxiao_fabu{position: absolute;top:0; left:100%;  width: 100%; /*display: none; */ }
#jiaxiao_fabu textarea{ font-size: inherit; font-family: inherit; }
#jiaxiao_fabu .jiaxiao_fabu{ width: 100%; }
.jiaxiao_fabu div{padding:10px; line-height: 30px; font-size: 14px; }
#jiaxiao_fabu .input{margin-left: 8px; height: 30px; line-height: 30px; border-radius: 5px; padding:0 5px; }
.jiaxiao_fabu .span{ padding-left: 10px; background:  url(../img/bx_03.png) left center no-repeat; background-size: 9px; }
/*提交按钮*/
#btn{ width: 90%; padding:8px 0; text-align: center; border-radius: 5px;  display: block;
   background: #3095fd; color:#fff; margin: 0 auto; }
</style>
</head>
<body style="overflow: hidden;">
<div class="page-container"  id="xiaoxi-list">
         <!-- 头部 -->
          <div class=" page-top">
                  <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                  <span class="t-title">作业班级</span>  
                  <a  class="g-other" id="fabtn">发布</a>
          </div>
          <!-- 内容区 -->
        	<div class="page-wrap" >
                <ul style="margin-top: 10px;">
                     <li>
                          <div><span class="title">作业1</span> <span class="title-left">08-17</span></div>
                          <div><span class="text">asdfdfsdfsdfdsf</span> <span class="text-left">08:50</span></div>
                     </li>
                     <li>
                          <div><span class="title">作业2</span> <span class="title-left">08-17</span></div>
                          <div><span class="text">asdfdfsdfsdfdsf</span> <span class="text-left">08:50</span></div>
                     </li>
                     <li>
                          <div><span class="title">作业3</span> <span class="title-left">08-17</span></div>
                          <div><span class="text">asdfdfsdfsdfdsf</span> <span class="text-left">08:50</span></div>
                     </li>
                </ul> 
        	</div>
</div>

<div class="page-container" id="xiangqing" style="display: none;">
         <!-- 头部 -->
          <div class=" page-top">
                  <a class="g-back" onclick="run('#xiangqing')"></a>                   
                  <span class="t-title">作业详情</span>  
                  <a  class="g-other"></a>
          </div>
          <!-- 内容区 -->
          <div class="page-wrap" >
                <div class="xiangqing">
                      <h2>作业1</h2>
                      <p>asdfsdfxcvcxvcxvcxvasdfvxcvcx</p>
                      <h4>未读学生</h4>
                      <ul>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                      </ul>
                      <h4>未交作业学生</h4>
                      <ul>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                            <li><span class="img"></span><span class="name">陈小</span></li>
                      </ul>
                </div>
          </div>
</div>

<div class="page-container" id="jiaxiao_fabu" style="display: none;">
         <!-- 头部 -->
          <div class=" page-top">
                  <a class="g-back" onclick="run('#jiaxiao_fabu')"></a>                   
                  <span class="t-title">作业发布</span>  
                  <a  class="g-other"></a>
          </div>
          <!-- 内容区 -->
          <div class="page-wrap" >
                <div class="jiaxiao_fabu">
                      <div>
                          <span id="ban-titl" class="span">班级</span>
                          <select name="" id="inp1" class="input">
                                <option value="0">请选择班级</option>                 
                                <option value="三年(12)">三年(12)</option>
                                <option value="三年(10)">三年(10)</option>
                          </select>
                      </div>
                      <div>
                          <span class="span">科目</span>
                          <select name="" id="inp2" class="input">
                                <option value="0">请选择科目</option>                 
                                <option value="语文">语文</option>
                                <option value="数学">数学</option>
                          </select>
                      </div>
                      <div><span class="span">标题</span><input type="text" class="input" id="inp3"></div>
                      <div>
                            <span style="vertical-align: top;" class="span">内容</span>
                            <textarea name="" id="inp4" class="input" style="min-height: 100px;vertical-align: top;"></textarea>
                      </div>
                      <div><span class="span">时间</span><input type="text" class="input" id="time"></div>
                      <div><span style="padding-left: 10px;">提醒</span><input class="weui-switch" type="checkbox"  style="float: right; margin-right: 15px;"></div>
                      <div><a href="###" id="btn">完成</a></div>
                </div>
          </div>
</div>
</body>
<script src="../js/laydate.js"></script>
<script>
// 日历
laydate.render({
      elem: '#time',
      type: 'datetime', 
      format:"yyyy/MM/dd HH:mm",
      min:0,
      done:function(v,d,en){     
      }
});   
// 发布通知, 初始化输入框宽度
var width1 = window.innerWidth                         
      || document.documentElement.clientWidth
      || document.body.clientWidth;
var width2 = $("#jiaxiao_fabu").find("#ban-titl").width();
$("#jiaxiao_fabu").find(".input").width( width1 - width2 - 60 )
// 消息列表点击
$("#xiaoxi-list").find("ul").click(function(){
    $("#xiangqing").show();
    $("#xiangqing").animate({"left":0});
})
// 点击 "发布"
$("#fabtn").click(function(){
    $("#jiaxiao_fabu").show();
    $("#jiaxiao_fabu").animate({"left":0});
})
// 左侧滑入效果
function run(x){
     $(x).animate({"left": "100%"},function(){
        $(x).hide();
     });
}
//提价按钮点击
$("#btn").click(function(){  
        if( !!$("#inp1").val()){
             var type = $("#inp1").val();
        }else{
            alert("请填写完整信息!")
            return false;
        }
        if( !!$("#inp3").val()){
             var title = $("#inp3").val();
        }else{
            alert("请填写完整信息!")
            return false;
        }
        if( !!$("#inp4").val()){
             var text = $("#inp4").val();
        }else{
            alert("请填写完整信息!")
            return false;
        }
        if( !!$("#time").val()){
             var time = $("#time").val();
        }else{
            alert("请填写完整信息!")
            return false;
        }

        var obj = {
             type:type,
             title:"作业",
             text: type+":"+text,
             time:time,
             href:"../otherpages/jiaxiao_zuoye2.html"
        }
      var arr2 = [obj];
      var datas = sessionStorage.data;
      if( !!datas){
           var arr =$.parseJSON(datas);
           arr.push(obj);
           sessionStorage.data = JSON.stringify( arr );
      }else{
           sessionStorage.data = JSON.stringify( arr2 );
      }
      location.href = "../../index.html";
})



</script>
</html>